import React, { PureComponent } from 'react';

import { Modal } from 'antd';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;

export default class SingleModal extends PureComponent {
  state = {};

  componentDidMount() {}

  handleOk = () => {
    const { onOk } = this.props;
    onOk();
  };

  handleCancle = () => {
    const { onCancel } = this.props;
    onCancel();
  };

  render() {
    const { visible, dataInfo, isSocial } = this.props;
    return (
      <div>
        <Modal
          title="账户信息"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancle}
          width={900}
        >
          <DescriptionList style={{ wordBreak: 'break-all', marginBottom: 6 }}>
            <Description term="客户名称">{dataInfo.custName}</Description>
            {isSocial ? (
              <Description term="社保账户名称">{dataInfo.accoName}</Description>
            ) : (
              <Description term="公积金账户名称">{dataInfo.accoName}</Description>
            )}
            <Description term="统一社会信用代码">{dataInfo.uniCreditCode}</Description>
          </DescriptionList>
          <DescriptionList style={{ wordBreak: 'break-all', marginBottom: 6 }}>
            <Description term="地区">{dataInfo.areaName}</Description>
            <Description term="单位名称">{dataInfo.orgName}</Description>
            {isSocial ? (
              <Description term="所属社保机构">{dataInfo.insOrg}</Description>
            ) : (
              <Description term="所属公积金机构">{dataInfo.accuOrg}</Description>
            )}
          </DescriptionList>
          <DescriptionList style={{ wordBreak: 'break-all', marginBottom: 6 }}>
            <Description term="支付方式">{dataInfo.payWayName}</Description>
            <Description term="银行账户信息">
              {(dataInfo.custBankAcc ? dataInfo.custBankAcc : '') +
                (dataInfo.custBankId ? dataInfo.custBankId : '')}
            </Description>
            {isSocial ? (
              <Description term="社保组合">{dataInfo.plcyName}</Description>
            ) : (
              <Description term="公积金组合">{dataInfo.accuPkgName}</Description>
            )}
          </DescriptionList>
          <DescriptionList style={{ wordBreak: 'break-all', marginBottom: 6 }}>
            {isSocial ? (
              <Description term="缴纳险种">{dataInfo.insKindNames}</Description>
            ) : (
              <Description term="是否突破上限">{dataInfo.exceedCeilingFlagName}</Description>
            )}
            <Description term="备注">{dataInfo.remark || '--'}</Description>
          </DescriptionList>
        </Modal>
      </div>
    );
  }
}
